<template>
    <div id="templ">
      <!--1.0商品的轮播图-->
        <div class="silder">
            <silder :imgs="imglist"></silder>
        </div>
        <!--2.0商品区-->
        <div class="goodsbuy">
             <h4 v-text ="goodsinfo.title"></h4>
            <p></p>
            <ul>
                <li class="price">
                  市场价:<s>￥{{goodsinfo.market_price}}</s>   销售价: <span>￥{{goodsinfo.sell_price}}</span>
                </li>
                <li class="buyCount">
                    购买数量: <inputnumber class="inputnumber" v-on:countSend="getCount"></inputnumber>
                    <!--设置动画-->
                    <transition   name="show"
                                 @before-enter="beforeEnter"
                                 @enter="enter"
                                 @after-enter="afterEnter">
                        <div v-if="isshow" id="box"></div>
                    </transition>
                </li>
                <li>
                    <mt-button type="primary" size="small">立即购买</mt-button>
                    <mt-button type="danger" size="small" @click="getgoodsCar">加入购物车</mt-button>
                </li>
            </ul>
        </div>
       <!--3.0商品参数-->
        <div class="goodsparams">
            <h4>商品参数</h4>
            <p></p>
            <ul>
                <li>商品编号:{{goodsinfo.goods_no}}</li>
                <li>库存数量:{{goodsinfo.stock_quantity}}</li>
                <li>上架时间:{{goodsinfo.add_time | datefmt("YYYY-MM-DD")}}</li>
            </ul>
        </div>
        <!--4.0 图文详情-->
        <!--5.0 商品评论-->
        <div class="goodsdesc">
            <router-link v-bind="{to:'/goods/goodsdesc/'+id}">
            <mt-button  class ="descimg" type="primary"  size="large" plain>图文介绍</mt-button>
            </router-link>
            <router-link v-bind ="{to:'/goods/goodscomment/'+id}">
            <mt-button type="danger"   size="large" plain>商品评价</mt-button>
            </router-link>
        </div>
    </div>
</template>

<script>
import common from  '../../kits/common'
//导入轮播图的组件
import silder from '../subcom/silder.vue';
//导入mintui中的组件
import { Toast } from 'mint-ui';
//导入inputNumber组件
import inputnumber from '../subcom/inputNumber.vue';
/*导入vm对象*/
import {vm,COUNTNUM} from  "../../kits/vm.js"
import  {setItem,valueobj} from  '../../kits/localSg.js'
export default {
    components:{
        silder,
        inputnumber
    },
    data(){
        return{
            isshow:false,
            id:0,
            imglist:[],//存储商品轮播图的数组
            goodsinfo:{},//存储商品信息
            goodscount:1 //表示购买商品的数量
        }
    },
    created(){
        this.id =this.$route.params.id;
        this.getimgs();
        this.getgoodsinfo();
    },
    methods:{
        //定义三个动画函数 用vue的钩子函数实现动画效果
        beforeEnter(el){
          el.style.transform="translate(0px,0px)";
        },
        enter(el,done){
           el.offsetWidth;
           el.style.transform="translate(75px,366px)";
           done();
           },
        afterEnter(el){
         //恢复到初始状态
           this.isshow =  !this.isshow;
        },
        getimgs(){
            var url = common.apidomain+"/api/getthumimages/"+this.id;
            this.$http.get(url).then(function (response) {
                var body =response.body;
                if(body.status !=0){
                  Toast(body.message);
                  return;
                }
                this.imglist =body.message;
            })
        },
        //获取商品信息
        getgoodsinfo(){
            var url =common.apidomain +"/api/goods/getinfo/"+this.id;
            this.$http.get(url).then(function (response) {
                var body =response.body;
                if(body.status !=0){
                    Toast(body.message);
                    return;
                }
                this.goodsinfo =body.message[0];
            })
        },
        //获取子组件传来的参数
        getCount(count){
            this.goodscount =count;
        },
        //加入购物车
        getgoodsCar(){
            //1.0触发
            vm.$emit(COUNTNUM,this.goodscount);
            //2.0将数据保存到localStorage
            valueobj.goodsid=this.id;
            valueobj.count=this.goodscount;
            setItem(valueobj);

            //3.0添加小球动画
            this.isshow = !this.isshow;
        }
    }
}
</script>

<style escoped>
/*1.0轮播图的样式*/
.silder{
    border:1px solid rgba(0,0,0,0.4);
    border-radius: 5px;
    margin: 5px;
}
/*2.0实现商品区*/
  .goodsbuy, .goodsparams,.goodsdesc{
    padding: 5px;
    border:1px solid rgba(0,0,0,0.4);
    border-radius: 5px;
    margin: 5px;
}
.goodsbuy h4{
    color:#0094ff;
}
.goodsbuy p, .goodsparams p{
    height: 1px;
    width: 100%;
    border-top:1px solid rgba(0,0,0,0.4);
}
.goodsbuy ul, .goodsparams ul {
    padding-left: 5px;
}
.goodsbuy ul li ,.goodsparams ul li {
    list-style: none;
    padding:8px;
}
.goodsbuy  .price span{
    color:red;
    font-weight: 700;
}
.goodsbuy  .price s{
    margin-right: 15px;
}
.goodsdesc  .descimg{
    margin-bottom: 10px;
 }
.buyCount{
    position: relative;
}
.inputnumber{
    position: absolute;
    /*有4个字每个12px: 12*4=48 48*2 =98*/
    left:100px;
    top:6px;
}
    /*设置动画*/
    #box{
        width: 20px;
        height: 20px;
        background-color: red;
        border-radius: 50%;
        position: absolute;
        left:150px;
        top:10px;
        transition: all 0.4s ease;
        z-index: 100;
    }
</style>